let p_bottom = document.getElementsByClassName("prev_bottom")[0];
let n_bottom = document.getElementsByClassName("next_bottom")[0];
let photos = document.getElementsByClassName("photos")[0];
let lis = document.getElementsByClassName("direction_li");
let backgrounds = document.getElementsByClassName("masking");

//工具类
function Set_transform(that, target) {
  target.setAttribute("style", `transform:translateX(-${that.distance[that.cur]}vw)`);
}


let slideshow = {
  cur: 0,
  distance: [0, 100, 200, 300],
  play_dom: null,
  color: ["172, 35, 35", //深红
    "114, 33, 110", //深紫
    "29, 65, 82", //深蓝
    "165, 29, 97", //粉红
    "74, 101, 102" //深灰
  ],
  add_move: function () {
    let that = this;
    p_bottom.addEventListener("click", function () {
      if (that.cur == 0) {
        //移动轮播图
        photos.setAttribute("style", " transform: translateX(-300vw);");
        //将当前活跃对象改变成”3“
        that.cur = 3;
        //改变指示(最下方小球)
        that.setting_direction();
      } else {
        that.cur--;
        //移动轮播图，根据上方改变的cur
        Set_transform(that, photos);
        that.setting_direction();
      }
    });
    n_bottom.addEventListener("click", function () {
      if (that.cur == 3) {
        photos.setAttribute("style", "transform: translateX(0vw);");
        that.cur = 0;
        that.setting_direction();
      } else {
        that.cur++;
        Set_transform(that, photos);
        that.setting_direction();
      }
    })
  },

  //设置底部小球颜色
  setting_direction: function () {
    for (li of lis) {
      li.setAttribute("style", "background-color:rgba(255, 255, 255, 0.5);")
    }
    lis[this.cur].setAttribute("style", "background-color:rgba(255, 255, 255, 1);")
    //播放时间清零，不然会导致自动播放和点击播放在时间上有"叠加"
    clearInterval(this.play_dom);
    this.auto_play();
  },
  //让轮播图自动播放
  auto_play: function () {
    this.play_dom = setInterval(() => {
      if (this.cur == 3) {
        photos.setAttribute("style", " transform: translateX(0vw);");
        this.cur = 0;
        this.setting_direction();
      } else {
        this.cur++;
        Set_transform(this, photos);
        this.setting_direction();
      }
    }, 5000);
  },

  //给背景随机蒙版色
  random_background: function () {
    // let number=Math.floor(Math.random()*4); //返回0~3的数字
    // setAttribute("style",`background:rgba(${this.color[number]},0.6)`);
    let count = this.color.length;
    Array.from(backgrounds).forEach((item, index) => {
      cur_number = Math.floor(Math.random() * count--) //返回0~count的数字
      item.setAttribute("style", `background:rgba(${this.color[cur_number]},0.6)`);
      this.color.splice(cur_number, 1);
    })
  },
  add_direction: function () {
    let that = this;
    Array.from(lis).forEach((item, index) => {
      item.addEventListener("click", function () {
        that.cur = index;
        Set_transform(that, photos);
        that.setting_direction();
      })
    });
  },
  //初始化函数
  initialize: function () {
    slideshow.add_move();
    slideshow.auto_play();
    slideshow.random_background();
    slideshow.add_direction();
  }
}
slideshow.initialize();